<template>
	<view class="container">
		<block v-if="isload">
			<view class="mymoney" :style="{ background: t('color2') }">
				<view class="f1">当前{{ t('余额') }}</view>
				<view class="f2">
					<text style="font-size: 26rpx">￥</text>
					{{ balance }}
				</view>
			</view>
			<view class="content2">
				<view class="item2">
					<view class="f1">充值{{ t('金额') }}(元)</view>
				</view>
				<view class="item3">
					<view class="f1">￥</view>
					<view class="f2">
						<input
							class="input"
							type="digit"
							name="money"
							:focus="autoFocus"
							v-model="amount"
							:placeholder="'请输入充值' + t('金额')"
							placeholder-style="color:#999;font-size:40rpx"
							@input="moneyinput"
						/>
					</view>
				</view>
			</view>

			<button class="btn" :style="{ background: t('color2') }" @click="startPayment">立即充值</button>

<!-- 			<view v-if="paymentResult" class="result-message">
				{{ paymentResult }}
			</view> -->
		</block>
		<loading v-if="loading"></loading>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();
export default {
	data() {
		return {
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,
			userinfo: [],
			balance: 0,
			sysset: false,
			paytype: '微信钱包',
			show: 0,
			pre_url: getApp().globalData.pre_url,

			amount: '', // 充值金额（元）
			paymentResult: '', // 支付结果提示
			autoFocus: true // 控制是否自动获取焦点
		};
	},

	onShow: function (opt) {
		uni.setNavigationBarTitle({
			title: this.t('余额') + '充值'
		});
		this.opt = app.getopts(opt);
		console.log('this.isload: ', this.isload);
		this.getdata();
	},

	onPullDownRefresh: function () {
		this.getdata();
	},

	mounted() {},

	methods: {
		getdata: function () {
			var that = this;
			that.loading = true;
			setTimeout(() => {
				that.loading = false;
				that.balance = that.balance + 1;
				that.loaded();
			}, 2000);
			return;
			app.get('AdminFinance/bwithdraw', {}, function (res) {
				that.loading = false;
				that.userinfo = res.userinfo;
				that.sysset = res.sysset;
				that.tmplids = res.tmplids;
				var sysset = res.sysset;
				var paytype = '微信钱包';
				if (sysset.withdraw_weixin == 1) {
					paytype = '微信钱包';
				}
				if (!sysset.withdraw_weixin || sysset.withdraw_weixin == 0) {
					paytype = '支付宝';
				}
				if ((!sysset.withdraw_weixin || sysset.withdraw_weixin == 0) && (!sysset.withdraw_aliaccount || sysset.withdraw_aliaccount == 0)) {
					paytype = '银行卡';
				}
				that.paytype = paytype;
				that.loaded();
			});
		},

		moneyinput: function (e) {
		},

		// 发起支付
		async startPayment() {
			var that = this;
			that.amountCheck(that.amount)
			app.showLoading('请求中');
			try {
				// 1. 调用后端接口生成预支付订单
				const orderInfo = await this.createOrder();

				// 2. 调用微信支付
				const paymentResult = await this.requestPayment(orderInfo);

				// 3. 处理支付结果
				if (paymentResult === 'success') {
					this.paymentResult = '支付成功';
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
				} else {
					this.paymentResult = '支付失败';
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				}
			} catch (error) {
				app.showLoading(false);
				console.error('支付失败:', error);
				this.paymentResult = '支付失败，请重试';
				uni.showToast({
					title: '支付失败，请重试',
					icon: 'none'
				});
			}
		},

		// 调用后端接口生成预支付订单
		async createOrder() {
			const res = await uni.request({
				url: 'https://your-server.com/api/createOrder', // 替换为你的后端接口
				method: 'POST',
				data: {
					amount: this.amount * 100, // 充值金额（单位：分）
					openid: '用户的openid' // 从微信获取的用户 openid
				}
			});

			if (res.statusCode === 200 && res.data.code === 0) {
				return res.data.data; // 返回支付参数
			} else {
				throw new Error('生成订单失败');
			}
		},

		// 调用微信支付
		async requestPayment(orderInfo) {
			return new Promise((resolve, reject) => {
				uni.requestPayment({
					provider: 'wxpay', // 支付提供商（微信支付）
					...orderInfo, // 后端返回的支付参数
					success: (res) => {
						resolve('success');
					},
					fail: (err) => {
						reject(err);
					}
				});
			});
		}
	}
};
</script>

<style scoped>
/* .recharge-container {
  padding: 20rpx;
  text-align: center;
 } */

.title {
	font-size: 34rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.input-container {
	margin-bottom: 20rpx;
}

.amount-input {
	border: 1rpx solid #ccc;
	border-radius: 5rpx;
	padding: 10rpx;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

.recharge-button {
	background-color: #07c160;
	color: white;
	border-radius: 5rpx;
	padding: 10rpx;
	width: 100%;
	margin: 0 auto;
}

.result-message {
	margin-top: 20rpx;
	font-size: 16rpx;
	color: #07c160;
}

.container {
	display: flex;
	flex-direction: column;
}

.mymoney {
	width: 94%;
	margin: 20rpx 3%;
	border-radius: 10rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 70rpx 0;
}

.mymoney .f1 {
	margin: 0 0 0 60rpx;
	color: rgba(255, 255, 255, 0.8);
	font-size: 24rpx;
}

.mymoney .f2 {
	margin: 20rpx 0 0 60rpx;
	color: #fff;
	font-size: 64rpx;
	font-weight: bold;
}

.mymoney .f3 {
	height: 56rpx;
	padding: 0 10rpx 0 20rpx;
	border-radius: 28rpx 0px 0px 28rpx;
	background: rgba(255, 255, 255, 0.2);
	font-size: 20rpx;
	font-weight: bold;
	color: #fff;
	display: flex;
	align-items: center;
	position: absolute;
	top: 94rpx;
	right: 0;
}

.content2 {
	width: 94%;
	margin: 10rpx 3%;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	background: #fff;
}

.content2 .item1 {
	display: flex;
	width: 100%;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 30rpx;
}

.content2 .item1 .f1 {
	flex: 1;
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	height: 120rpx;
	line-height: 120rpx;
}

.content2 .item1 .f2 {
	color: #fc4343;
	font-size: 44rpx;
	font-weight: bold;
	height: 120rpx;
	line-height: 120rpx;
}

.content2 .item2 {
	display: flex;
	width: 100%;
	padding: 0 30rpx;
	padding-top: 10rpx;
}

.content2 .item2 .f1 {
	height: 80rpx;
	line-height: 80rpx;
	color: #999999;
	font-size: 28rpx;
}

.content2 .item3 {
	display: flex;
	width: 100%;
	padding: 0 30rpx;
	padding-bottom: 20rpx;
}

.content2 .item3 .f1 {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 60rpx;
	color: #333333;
	font-weight: bold;
	margin-right: 20rpx;
}

.content2 .item3 .f2 {
	display: flex;
	align-items: center;
	font-size: 60rpx;
	color: #333333;
	font-weight: bold;
}

.content2 .item3 .f2 .input {
	font-size: 60rpx;
	height: 100rpx;
	line-height: 100rpx;
}

.content2 .item4 {
	display: flex;
	width: 94%;
	margin: 0 3%;
	border-top: 1px solid #f0f0f0;
	height: 100rpx;
	line-height: 100rpx;
	color: #8c8c8c;
	font-size: 28rpx;
}

.withdrawtype {
	width: 94%;
	margin: 20rpx 3%;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	background: #fff;
}

.withdrawtype .f1 {
	height: 100rpx;
	line-height: 100rpx;
	padding: 0 30rpx;
	color: #333333;
	font-weight: bold;
}

.withdrawtype .f2 {
	padding: 0 30rpx;
}

.withdrawtype .f2 .item {
	border-bottom: 1px solid #f5f5f5;
	height: 100rpx;
	display: flex;
	align-items: center;
}

.withdrawtype .f2 .item:last-child {
	border-bottom: 0;
}

.withdrawtype .f2 .item .t1 {
	flex: 1;
	display: flex;
	align-items: center;
	color: #333;
}

.withdrawtype .f2 .item .t1 .img {
	width: 44rpx;
	height: 44rpx;
	margin-right: 40rpx;
}

.withdrawtype .f2 .item .radio {
	flex-shrink: 0;
	width: 36rpx;
	height: 36rpx;
	background: #ffffff;
	border: 3rpx solid #bfbfbf;
	border-radius: 50%;
	margin-right: 10rpx;
}

.withdrawtype .f2 .item .radio .radio-img {
	width: 100%;
	height: 100%;
}

.btn {
	height: 100rpx;
	line-height: 100rpx;
	width: 90%;
	margin: 0 auto;
	border-radius: 50rpx;
	margin-top: 30rpx;
	color: #fff;
	font-size: 30rpx;
	font-weight: bold;
}
</style>
